<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1 id="myh1"></h1>

  <script>
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace

    // 关键字
    const kw = 'js'
    // 待处理的字符串
    const str = 'JS ArrayBuffer about js'

    // 1. 字符串 replace 方法最普通的用法
    // const newStr = str.replace('js', 'javascript')

    // 2. 字符串 replace 方法的第一个参数，还可以传递一个正则表达式
    // const newStr = str.replace(/js/, 'javascript')

    // 3. 正则可以通过 i 模式，指定忽略大小写
    // const newStr = str.replace(/js/i, 'javascript')

    // 4. 正则可以通过 g 模式，进行全局匹配
    // const newStr = str.replace(/js/ig, 'javascript')

    // 5. 创建一个正则的实例对象，通过第一个实参指定正则要匹配的内容，第二个参数来指定匹配的模式
    const reg = new RegExp(kw, 'ig')

    // A. 这种方式，无法保留原来的大小写
    // const newStr = str.replace(reg, `<span style="color: red; font-weight: bold;">${kw}</span>`)

    // B. 这种方式，可以拿到匹配的文本内容，然后在文本内容之外包裹一层 <span> 并返回即可
    const newStr = str.replace(reg, (val) => {
      console.log(val)
      return `<span style="color: red; font-weight: bold;">${val}</span>`
    })

    console.log(newStr)

    document.querySelector('#myh1').innerHTML = newStr
  </script>
</body>

</html>